<template>

  <!-- 技术评定 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      class="left fade_animition_left"
      :color="['#3A506A', '#3BD5FD']"
      style="height:50vh; width: 20vw"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <h6 class="l_title-s">养护管理</h6>
      <div class="card-num-box">
        <p class="title3"> {{leftTotal.name}}</p>
        <number-scroll :number="leftTotal ? leftTotal.num : 0"></number-scroll>
      </div>

      <div class='left-li common_card-bk' v-for="item in leftTotal.itemList || []" :key="item.name">
        <div class='left-li-top'>
          <p class='left-li-top-title'>
            <img  v-if="item.name === '日常巡查'" src='../imgs/jg_xc.png'>
            <img  v-if="item.name === '汛期检查'" src='../imgs/jg_jc.png'>
            <img  v-if="item.name === '定期检查'" src='../imgs/jg_dqjc.png'>
            {{item.name}}
          </p>
          <p class='float-right left-li-title-right'>
              <span class='num1 color2'>
                <number-change
                  :number="item.itemList ? item.itemList.reduce((prev, cur) => prev + cur.num, 0) : item.num"></number-change>
              </span> 次
          </p>
        </div>
      </div>


    </dv-border-box-13>

    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">

      <dv-decoration-1 class="board_page-right-d" style="width:200px;height:40px;"/>

      <h6 class="l_title-s">路线养护次数排序</h6>
        <dv-scroll-ranking-board :config="rightTableConfig" class="dv_table_right"/>
    </dv-border-box-13>
  </div>
</template>

<script>
import {curingOrderCount, curingOrderInfo} from '@/services/model/data-board'
import NumberChange from '../components/number-change.vue'
import NumberScroll from '../components/number-scroll'

export default {
  components: {NumberChange, NumberScroll},
  data() {
    return {
      // 当前激活的图表
      currentActive: '',
      charts: null,
      // 右边列表
      rightTableList: [],
      // 排查总数统计
      leftTotal: {},
    }
  },
  computed: {
    rightTableConfig() {
      return {
        data: this.rightTableList.map(x => ({name: x.name, value: x.num})),
        rowNum: 12,
      }
    }
  },
  methods: {
    // 隐患排查-最近数据轮播(TOP20)
    async queryRightList(deptTreeId, roadId) {
      const {data} = await curingOrderInfo({deptTreeId, roadId})
      this.rightTableList = data || []
    },
    // 路线改变
    refresh(deptTreeId, roadId) {
      this.queryLeftTotal(deptTreeId, roadId)
      this.queryRightList(deptTreeId, roadId)
      this.$emit('changeMap')
    },
    // 查询左边顶部的统计数据
    async queryLeftTotal(deptTreeId, roadId) {
      const {data} = await curingOrderCount({deptTreeId, roadId})
      this.leftTotal = data || {}
    },
  },
  mounted() {
    let deptTreeId = this.$route.params.deptTreeId
    let roadId = this.$route.params.roadId
    this.refresh(deptTreeId, roadId, slopeId)
  }
}
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 50vh;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .left-li {
    position: relative;
    margin: 1rem;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 1.125rem;
  }

  .left .left-li .left-li-title-right {
    float: right;
    font-size: 0.75rem;
    color: #939EA3;
  }

  .left-li-bottom {
    flex-wrap: wrap;
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-between;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;

    &::before, &::after {
      content: " ";
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      background: #3A506A;
      position: absolute;
      top: -0.15rem;
      z-index: 2;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }

    li {
      width: 50%;

      &:nth-child(even) {
        text-align: right;
      }
    }
  }


  .left .left-li .left-li-top-title img {
    width: 1.8rem;
    vertical-align: bottom;
  }


  .card-num-box {
    text-align: center;
    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }
</style>
